<!--点赞,评论,收藏-->
<template>
    <div style="display: flex">
        <el-tooltip content="点击评论">
            <div style="display: flex" @click="op('评论')">
                <img src="https://no1-system.oss-cn-beijing.aliyuncs.com/%E8%AF%84%E8%AE%BA.png" style="height: 20px;width: 20px;margin-top: 1px">
            </div>
        </el-tooltip>
        <el-tooltip content="点赞" style="margin-left: 10px" v-if="isColl">
            <div style="display: flex">
                <img v-if="getTypeData(0) && getTypeData(0).opHso"
                     @click="cancelOp('点赞')"
                     src="https://no1-system.oss-cn-beijing.aliyuncs.com/%E7%82%B9%E8%B5%9E_check.png" style="height: 20px;width: 20px">
                <img v-else @click="op('点赞')" src="https://no1-system.oss-cn-beijing.aliyuncs.com/%E7%82%B9%E8%B5%9E.png" style="height: 20px;width: 20px">
                <span v-if="isShowNum" style="margin-left: 3px;margin-top: 1px;color: var(--theme-backgroud-color)">{{getTypeData(0) ? getTypeData(0).number : 0}}</span>
            </div>
        </el-tooltip>
        <el-tooltip content="收藏" v-if="isColl" style="margin-left: 10px">
            <div style="display: flex">
                <img v-if="getTypeData(2) && getTypeData(2).opHso"
                     @click="cancelOp('收藏')" src="https://no1-system.oss-cn-beijing.aliyuncs.com/%E6%94%B6%E8%97%8F_check.png" style="height: 20px;width: 20px">
                <img v-else @click="op('收藏')" src="https://no1-system.oss-cn-beijing.aliyuncs.com/%E6%94%B6%E8%97%8F.png" style="height: 20px;width: 20px">
                <span v-if="isShowNum" style="margin-left: 3px;margin-top: 1px;color: var(--theme-backgroud-color)">{{getTypeData(2) ? getTypeData(2).number : 0}}</span>
            </div>
        </el-tooltip>

        <!--我要评论弹框-->
        <el-dialog
            title="评论"
            :visible.sync="commentVisible"
            :show-close="false"
            :append-to-body="true"
            width="45%">
            <div style="display: flex">
                <el-input type="textarea" :rows="4" v-model="selectCommentRow.content" placeholder="请输入评论内容？"></el-input>
            </div>
            <div style="text-align: right;margin-top: 10px">
                <el-button type="primary" size="mini" @click="sendComment">回复评论</el-button>
                <el-button size="mini" style="margin-left: 10px" @click="commentVisible = false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
export default {
    data() {
        return {
            // 数量
            numberMap: [],
            // 点赞/收藏信息
            selectRow: {},
            // 评论信息
            selectCommentRow: {},
            commentVisible: false
        }
    },
    computed: {
        // 获取对应类型的数据
        getTypeData() {
            return function (type) {
                return this.numberMap.find(x => x.state === type)
            }
        },
    },
    mounted() {
        this.$nextTick(() => {
            this.selectRow = JSON.parse(JSON.stringify(this.opData))
            if (this.isShowNum) {
                setTimeout(() => {
                    this.getNumberMap()
                }, 100)
            }
        })
    },
    methods: {
        cancelOp(type) {
            let thumbsType = -1
            if (type === '点赞') {
                thumbsType = this.state
            }
            if (type === '收藏') {
                thumbsType = 2
            }
             this.request.get(`/thumbs/deleteByLinkIdAndUserId?linkId=${this.opData.linkId}&type=${thumbsType}`).then(res => {
                 if (res.code === '200') {
                     this.messageSuccess('取消' + type + '成功')
                     this.getNumberMap()
                     this.$emit("brush")
                 } else {
                     this.messageError(res.msg)
                 }
             })
        },
        op(type) {
            this.selectRow = {}
            this.selectCommentRow = {}
            this.selectCommentRow.linkId = this.opData.linkId
            this.selectRow.linkId = this.opData.linkId
            this.selectRow.title = this.opData.title
            if (type === '评论') {
                if (this.state === 0) {
                    this.selectCommentRow.linkId = 0
                }
                this.selectCommentRow.postCodeId = this.opData.postCodeId
                this.commentVisible = true
            }
            if (type === '点赞') {
                this.selectRow.type = this.state
                this.addData(type)
            }
            if (type === '收藏') {
                this.selectRow.type = 2
                this.addData(type)
            }
        },
        // 添加数据
        addData(type) {
            this.request.post("/thumbs",this.selectRow).then(res => {
                if (res.code === '200') {
                    this.messageSuccess(type + "成功")
                    this.getNumberMap()
                    this.$emit("brush")
                } else {
                    this.messageError(res.msg)
                }
            })
        },
        // 发布评论
        sendComment() {
            if (!this.selectCommentRow.content) {
                this.messageError("请先填写评论信息！")
                return
            }
            this.request.put("/comment",this.selectCommentRow).then(res => {
                if (res.code === '200') {
                    this.messageSuccess("评论发表成功！")
                    this.commentVisible = false
                    this.selectCommentRow = {}
                    // 通知父组件刷新列表
                    this.$emit("brush")
                } else {
                    this.messageError(res.msg)
                }
            })
        },
        // 获取数量
        getNumberMap() {
            if (!this.opData.linkId) {
                return
            }
            this.request.get("/thumbs/queryNumber?linkId=" + this.opData.linkId).then(res => {
                if (res.code === '200') {
                    this.numberMap = res.data
                }
            })
        }
    },
    props: {
        // 是否显示收藏按钮
        isColl: {
            type: Boolean,
            default: true
        },
        // 是否显示数量
        isShowNum: {
            type: Boolean,
            default: false
        },
        // 需要操作的对象
        opData: {
            type: Object,
            default: {}
        },
        // 0 帖子 1 评论
        state: {
            type: Number,
            default: 0
        }
    }
}
</script>